<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>咿呀口腔 - 登录</title>
    <script src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctxPath}/static/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${ctxPath}/static/js/plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/validate/bootstrapValidator.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/validate/zh_CN.js"></script>
    <script src="${ctxPath}/static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/jquery-treegrid/js/jquery.treegrid.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/jquery-treegrid/js/jquery.treegrid.bootstrap3.js"></script>
    <script src="${ctxPath}/static/js/plugins/jquery-treegrid/extension/jquery.treegrid.extension.js"></script>
    <script src="${ctxPath}/static/js/plugins/layer/layer.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/iCheck/icheck.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/layer/laydate/laydate.js"></script>
    <script src="${ctxPath}/static/js/plugins/webuploader/webuploader.min.js"></script>
    <script src="${ctxPath}/static/js/common/ajax-object.js"></script>
    <script src="${ctxPath}/static/js/common/bootstrap-table-object.js"></script>
    <script src="${ctxPath}/static/js/common/tree-table-object.js"></script>
    <script src="${ctxPath}/static/js/common/web-upload-object.js"></script>
    <script src="${ctxPath}/static/js/common/ztree-object.js"></script>
    <script src="${ctxPath}/static/js/common/Feng.js"></script>
    <script src="${ctxPath}/static/js/plugins/selectpicker/bootstrap-select.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/selectpicker/defaults-zh_CN.js"></script>
    <script src="${ctxPath}/static/js/plugins/bootstrap-table/bootstrap-table-export.min.js"></script>
    <script src="${ctxPath}/static/js/plugins/bootstrap-table/tableExport.min.js"></script>
    <link rel="shortcut icon" href="${ctxPath}/static/favicon.ico">
    <link href="${ctxPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxPath}/static/css/animate.css" rel="stylesheet">
    <link href="${ctxPath}/static/css/style.css?v=4.1.0" rel="stylesheet">
    <script>if (window.top !== window.self) {
        window.top.location = window.location;
    }</script>
    <script src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctxPath}/static/js/bootstrap.min.js?v=3.3.6"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .log_box {
            z-index: 2;
            width: 38%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 9%;
        }

        .login_log1 {
            display: block;
            margin-top: 18%;
        }

        .h48 {
            font-size: 36px;
            color: #3F599B;
            font-weight: bold;
            margin: 42px 0 20px 0;
        }

        .user_box, .password_box, .outpatient_box {
            width: 273px;
            height: 34px;
            background: #e0e0f9;
            border-radius: 45px;
            margin-bottom: 28px;
        }

        .user_ipt, .password_ipt {
            position: relative;
            top: 7px;
            left: 25px;
            background: transparent;
            border: none;
            outline: none;
        }

        .user_log, .password_log, .outpatient_log {
            height: 77%;
            position: relative;
            top: 3px;
            left: 20px;
        }

        .login_btn {
            width: 273px;
            height: 34px;
            background: #4484d5;
            border-radius: 45px;
            text-align: center;
            line-height: 34px;
            color: white;
            outline: none;
            border: none;
        }

        .outpatient_ipt {
            display: inline-block;
            position: relative;
            top: 7px;
            left: 25px;
            background: transparent;
            border: none;
            outline: none;
            width: 210px;
        }

        .advertising_bg {
            width: 53%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
        }

        .advertising_share {
            position: absolute;
            left: -96px;
            width: 55%;
            height: 100%;
            z-index: 1;
        }

        .advertising_photo {
            position: absolute;
            right: 0;
            width: 100%;
            height: 100%;
        }

        .ynpassword {
            font-size: 12px;
            width: 273px;
            height: 34px;
            position: relative;
        }

        .ynpassword_left {
            cursor: pointer;
            position: absolute;
            left: 20px;
            vertical-align: top;
        }

        .ynpassword_left_bg {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #4484D5;
            text-align: center;
            line-height: 20px;
        }

        .ynpassword_left_ok {
            font-size: 12px;
            color: #4484D5;
        }

        .ynpassword_right {
            cursor: pointer;
            position: absolute;
            right: 22px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="log_box">
        <img src="${ctxPath}/static/img/y1.png" alt="log图片" class="login_log1">
        <p class="h48">欢迎登陆咿呀口腔门诊管理系统</p>
        <div class="user_box">
            <img class="user_log" src="${ctxPath}/static/img/y4.png" alt="用户">
            <input class="user_ipt" type="text" id="userName" name="username" placeholder="用户名" required="">
        </div>
        <div class="password_box">
            <img class="password_log" src="${ctxPath}/static/img/y5.png" alt="密码">
            <input class="password_ipt" type="password" id="passWord" name="password" placeholder="密码" required="">
        </div>
        <div class="outpatient_box">
            <img class="outpatient_log" src="${ctxPath}/static/img/y6.png" alt="门诊">
            <select class="outpatient_ipt" id="outpatientName" name="outpatientName"></select>
        </div>
        <h4 style="color: red;">${tips!}</h4>
        <div class="ynpassword">
            <div class="ynpassword_left">
                <div class="ynpassword_left_bg">
                    <i class="glyphicon glyphicon-ok ynpassword_left_ok"></i>
                </div>
                记住密码
            </div>
            <div class="ynpassword_right">忘记密码</div>
        </div>

        @if(shiro.hasPermission("/customer/aOperations")){
        <div class="other_bt" onclick="downLoad()">导出</div>
        @}

        <div class="login">
            <button type="submit" class="login_btn" id="submit_login">登录</button>
        </div>
    </div>

    <div class="advertising_bg">
        <img class="advertising_share" src="${ctxPath}/static/img/y9.png" alt="广告页遮罩层">
        <img class="advertising_photo" src="${ctxPath}/static/img/y11.png" alt="广告页图片">
    </div>
</div>

<script>
    downLoad = function () {
        // location.href = Feng.ctxPath + '/wholeHospital/getTemplateExcel?';
        location.href = Feng.ctxPath + '/wholeHospital/downLoad'
    };
    var box = document.getElementsByClassName("box")[0];
    var ynpassword_left = document.getElementsByClassName('ynpassword_left')[0];
    var ynpassword_left_ok = document.getElementsByClassName('ynpassword_left_ok')[0];
    var password_ok_show = false;

    //保存记住密码勾选状态
    if (localStorage.length !== 0) {
        if (localStorage.getItem('password_ok_show') === 'true') {
            password_ok_show = true;
        } else {
            password_ok_show = false;
        }
    }
    if (password_ok_show === true) {
        ynpassword_left_ok.style.color = 'white';
    } else if (password_ok_show === false) {
        ynpassword_left_ok.style.color = '#4484D5';
    }
    //记住密码勾选状态决定是否清楚缓存
    if (password_ok_show === false || password_ok_show === 'false') {
        localStorage.clear();
    }

    //初始化下拉到店门诊列表
    $.post(Feng.ctxPath + "/outpatientManagement/getList", function (data) {
        var txt = '';
        for (var i = 0; i < data.length; i++) {
            txt += '<option value="' + data[i].simplename + '">' + data[i].simplename + '</option>';
        }
        document.getElementById('outpatientName').innerHTML = txt;
        var outpatientName = document.getElementById('outpatientName').value;
        //状态单选
        if (outpatientName != "") {
            $("#outpatientName option[value=" + outpatientName + "]").attr("selected", "selected");
        }

        var optionALL = $("#outpatientName").find("option");
        for (var q = 0; q < optionALL.length; q++) {
            if (localStorage.getItem('outpatientName') === optionALL[q].innerHTML) {
                optionALL[q].selected = true;
            }
        }

    }, "json");

    //页面刷新保存用户登陆信息
    $('#userName').val(localStorage.getItem('userName'));
    $('#passWord').val(localStorage.getItem('passWord'));

    //获取视口宽高。设置最外层容器宽高
    box.style.width = document.body.clientWidth + "px";
    box.style.height = document.body.clientHeight + "px";
    //记住密码
    ynpassword_left.onclick = function () {
        password_ok_show = !password_ok_show;
        if (password_ok_show === true) {
            ynpassword_left_ok.style.color = 'white';
        } else if (password_ok_show === false) {
            ynpassword_left_ok.style.color = '#4484D5';
        }
    };
    //
    $(function () {
        $("#kaptcha").on('click', function () {
            $("#kaptcha").attr('src', '${ctxPath}/kaptcha?' + Math.floor(Math.random() * 100)).fadeIn();
        });
    });

    $(document).on('keypress',function(event){
        if(event.keyCode == 13) {
            var userName = $('#userName').val();
            var passWord = $('#passWord').val();
            var outpatientName = $('#outpatientName').val();

            localStorage.setItem('userName', userName);
            localStorage.setItem('passWord', passWord);
            localStorage.setItem('outpatientName', outpatientName);
            localStorage.setItem('password_ok_show', password_ok_show);


//        var kaptcha = $('#kaptcha1').val();
            $.ajax({
                url: "${ctxPath}/login",
                type: "post",
                data: {
                    //                "kaptcha": kaptcha,
                    "username": userName,
                    "outpatientName": outpatientName,
                    "password": passWord
                },
                success: function (data) {
                    window.location.href = "${ctxPath}/index";
                },
                error: function (data) {
                    alert('账户,密码或验证码错误，请稍后再试!');
                    window.location.href = "${ctxPath}/login";
                }
            });
        }
    })

    $('#submit_login').click(function () {
        var userName = $('#userName').val();
        var passWord = $('#passWord').val();
        var outpatientName = $('#outpatientName').val();

        localStorage.setItem('userName', userName);
        localStorage.setItem('passWord', passWord);
        localStorage.setItem('outpatientName', outpatientName);
        localStorage.setItem('password_ok_show', password_ok_show);


//        var kaptcha = $('#kaptcha1').val();
        $.ajax({
            url: "${ctxPath}/login",
            type: "post",
            data: {
                //                "kaptcha": kaptcha,
                "username": userName,
                "outpatientName": outpatientName,
                "password": passWord
            },
            success: function (data) {
                window.location.href = "${ctxPath}/index";
            },
            error: function (data) {
                alert('账户,密码或验证码错误，请稍后再试!');
                window.location.href = "${ctxPath}/login";
            }
        });
    });
</script>

<style>
    .search_bt, .other_bt {
        cursor: pointer;
        display: inline-block;
        width: 73px;
        height: 27px;
        line-height: 27px;
        color: white;
        text-align: center;
        font-size: 14px;
        border-radius: 20px;
    }

    .search_bt {
        background: url("${ctxPath}/static/img/x18.png") no-repeat;
        background-size: cover;
    }

    .other_bt {
        background: url("${ctxPath}/static/img/x19.png") no-repeat;
        background-size: cover;
    }

    .search_bt_xy {
        margin-bottom: 5px;
    }
</style>
</body>

</html>
